 <template>
	<div class="commodity">
		<div v-show="toggle" v-loading="loading">
			<div class="crumb">
				您当前选择的是:{{this.selectGoods1}}/{{this.selectGoods2}}/{{this.selectGoods3}}(上架后不可更改，请谨慎选择)
			</div>
			<div class="select-warrp">
				<div class="select-item">
					<el-input v-model="keyword1" placeholder="请输入内容"></el-input>
					<ul class="select-box" v-if="!searchResult1.length">
						<li class="select-item" :class="{'active':index === current1}" @click="getSecondMenu(item,index)" v-for="(item,index) in groupList1">
							{{item.cat_name}}
						</li>
					</ul>					
					<ul class="select-box" v-if="searchResult1.length">
						<li class="select-item" :class="{'active':index === current1}" @click="getSecondMenu(item,index)" v-for="(item,index) in searchResult1">
							{{item.cat_name}}
						</li>
					</ul>
				</div>				
				<div class="select-item">
					<el-input v-model="keyword2" placeholder="请输入内容"></el-input>
					<ul class="select-box" v-if="!searchResult2.length">
						<li class="select-item" :class="{'active':index === current2}" @click="getTherdMenu(item,index)" v-for="(item,index) in groupList2">
							{{item.cat_name}}
						</li>
					</ul>					
					<ul class="select-box" v-if="searchResult2.length">
						<li class="select-item" :class="{'active':index === current2}" @click="getTherdMenu(item,index)" v-for="(item,index) in searchResult2">
							{{item.cat_name}}
						</li>
					</ul>
				</div>				
				<div class="select-item">
					<el-input v-model="keyword3" placeholder="请输入内容"></el-input>
					<ul class="select-box" v-if="!searchResult3.length">
						<li class="select-item" :class="{'active':current3 === index}" 
							v-for="(item,index) in groupList3"
							@click="selectEnd(item,index)">
							{{item.cat_name}}
						</li>
					</ul>					
					<ul class="select-box" v-if="searchResult3.length">
						<li class="select-item" :class="{'active':current3 === index}" 
							v-for="(item,index) in searchResult3"
							@click="selectEnd(item,index)">
							{{item.cat_name}}
						</li>
					</ul>
				</div>
			</div>
			<div class="select-btn" @click="selectOk">确定</div>
		</div>
		<div class="form-module" v-show="!toggle">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<h3 class="title" style="margin: 20px 0">● 基础信息</h3>
			<div class="form-con">
				<el-form-item label="选择项目">
					<p class="desc">{{this.selectGoods3}} <span class="edit"> 修改</span></p>
					<p class="desc-m">商品上架后不可更改，请谨慎选择</p>
				</el-form-item>				
				<el-form-item label="商品名称" prop="title">
				   	<el-input style="width: 500px;" v-model="ruleForm.title" placeholder="请输入内容"></el-input>
				</el-form-item>						
				<el-form-item label="竖版图" prop="title">
				   	<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(3)">
						<div class="desc el-icon-plus"  v-if="!imgU2"></div>
						<img v-if="imgU2" id="showImg" :src="imgU2" />	
						<input type="file" accept="image/*" @change="onFileChange($event,2)" style="display:none;" id="upfile2">
					</div>	
				</el-form-item>				
				<el-form-item label="商品规格" prop="goodsSpec">
				   	<el-radio v-model="ruleForm.goodsSpec" label="0">统一规格</el-radio>
  					<el-radio v-model="ruleForm.goodsSpec" label="1">多规格</el-radio>
  					<div class="guige-warrp" v-show="ruleForm.goodsSpec === '1'">
  						<div class="title" >
  							<p v-show="!skuList.length">暂无规格数据，请先添加规格</p>
  							<p style="line-height: 32px;" v-for="(item,index) in skuList" v-show="skuList.length">
  								名称:{{item.sku_title}} 价格:{{item.sku_price}} 库存:{{item.sku_stock}}&nbsp;&nbsp;&nbsp;
  								<span style="color: #576b95;cursor: pointer;" @click="delSkuList(index)">删除</span>
  							</p>
  						</div>
  		
  						<el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
  							 <el-form-item label="规格名称" prop="sku_title" style="margin-bottom: 20px">
							    <el-input style="width: 200px;" v-model="ruleForm1.sku_title"></el-input>
							 </el-form-item>
							 <el-form-item label="价格" prop="sku_price" style="margin-bottom: 20px">
							    <el-input style="width: 200px;" v-model="ruleForm1.sku_price"></el-input>
							 </el-form-item>			 
							 <el-form-item label="库存" prop="sku_stock" style="margin-bottom: 20px">
							    <el-input style="width: 200px;" v-model="ruleForm1.sku_stock"></el-input>
							 </el-form-item>							 
							 <el-form-item label="图片" style="margin-bottom: 20px">
								<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(0)">
									<div class="desc el-icon-plus"  v-if="!imgU0"></div>
									<img v-if="imgU0" id="showImg" :src="imgU0" />	
									<input type="file" accept="image/*" @change="onFileChange($event,0)" style="display:none;" id="upfile0">
								</div>	
							 </el-form-item>
							 <el-form-item>
							    <el-button size="mini" type="primary" @click="saveSku('ruleForm1')">立即添加</el-button>
							    <el-button size="mini">取消</el-button>
							 </el-form-item>
  						</el-form>
  					</div>
				</el-form-item>				
				<el-form-item label="分组">
					<div class="guige-warrp" style="padding:0 30px;">
						<div style="border-bottom: 1px solid #ccc" v-show="!groupList.length">
  							<p >暂无分组，请先添加分组</p>
  						</div>
  						<div>
  							<span v-for="item in groupList" style="margin-right: 20px;">
  								<el-radio v-model="radioSel" :label="item.id">{{item.cat_name}}</el-radio>
  							</span> 							  							
  						</div> 		
  						<el-popover
						  placement="bottom"
						  title="分组名称"
						  width="200"
						  trigger="click"
						  v-model="showVisible"
						  >
						  <el-input size="mini" v-model="newGroupName"></el-input>
						  <div style="margin-top: 10px;">
						  	<el-button size="mini" type="primary" @click="createGroup">确定</el-button>
						  	<el-button size="mini" type="primary" @click="showVisible = false">取消</el-button>
						  </div>
						  <el-button slot="reference" size="mini" type="primary">新建分组</el-button>
						</el-popover>
  						
					</div>
				</el-form-item>					
				<el-form-item label="价格" prop="price">
				   	<el-input v-model="ruleForm.price" type="number" style="width: 200px;" placeholder="请输入价格(数字类型)"></el-input> 元
				</el-form-item>				
				<el-form-item label="原价(选填)">
				   	<el-input v-model="ruleForm.original_price" type="number" style="width: 200px;" placeholder="请输入原价(数字类型)"></el-input> 元
				</el-form-item>						
				<el-form-item label="商品库存" prop="stock">
				   <el-input v-model="ruleForm.stock" type="number" style="width: 200px;" placeholder="请输入库存(数字类型)"></el-input>
				</el-form-item>						
				<el-form-item label="商品条码(选填)">
				   	<el-input v-model="ruleForm.barcode" style="width: 200px;" placeholder="请输入内容"></el-input>
				</el-form-item>					
				<el-form-item label="折扣">
				   	<el-input v-model="ruleForm.discount" style="width: 200px;" placeholder="请输入内容"></el-input>
				</el-form-item>					
				<el-form-item label="运费模板">
				<!--    	<el-input v-model="ruleForm.shipping_id" style="width: 200px;" placeholder="请输入内容"></el-input> -->
				   	<el-select v-model="ruleForm.shipping_id" placeholder="请选择">
					    <el-option
					      v-for="item in frendID"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					</el-select>
				</el-form-item>					
				<el-form-item label="运费">
				   	<el-input v-model="ruleForm.shippingMoney" style="width: 200px;" placeholder="请输入内容"></el-input>
				</el-form-item>						
				<el-form-item label="商品图片" prop="goodsName">
				   		<p class="desc">主图 
							<span class="tip">(建议尺寸为640像素*640像素，大小不超过500KB)</span>
						</p>
						<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(1)">
							<div class="desc el-icon-plus"  v-if="!imgU1"></div>
							<img v-if="imgU1" id="showImg" :src="imgU1" />	
							<input type="file" accept="image/*" @change="onFileChange($event,1)" style="display:none;" id="upfile1">
						</div>								
						<p class="desc">其他图片 
							<span class="tip">(选传，单张图片大小不超过500KB，最多10张)</span>
						</p>
						<div class="upload_imgs arr-up" v-for="item in imgList" v-if="imgList.length">
							<img class="showImg2 arr-img"  :src="item" />
						</div>
						<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(2)" style="height: 100px;width:100px">
							<div class="desc el-icon-plus"></div>	
							<input type="file" multiple @change="onFileChangeList" style="display:none;" id="upfile">
						</div>
				</el-form-item>						
				<el-form-item label="详情描述" prop="summary">
				   	<el-radio v-model="ruleForm.is_summary" label="0">不设置</el-radio>
  					<el-radio v-model="ruleForm.is_summary" label="1">设置</el-radio>
  					<quill-editor 
  						v-show="ruleForm.is_summary == 1"
		      			v-model="ruleForm.summary" 
		      			ref="myQuillEditor" 
		   			>
		    		</quill-editor>
				</el-form-item>					
				<el-form-item label="是否支持外卖" prop="summary">
				   	<el-radio v-model="ruleForm.has_takeaway" label="0">否</el-radio>
  					<el-radio v-model="ruleForm.has_takeaway" label="1">是</el-radio>
				</el-form-item>									
				<el-form-item label="是否促销" prop="is_restrictions">
				   	<el-radio v-model="ruleForm.is_promotion" label="0">不促销</el-radio>
  					<el-radio v-model="ruleForm.is_promotion" label="1">促销</el-radio>
  					<el-input 
  						type="textarea"
  						:rows="5"
  						v-show="ruleForm.is_promotion == 1" 
  						v-model="ruleForm.promotion_str" 
  						placeholder="促销话语"></el-input>
				</el-form-item>					
				<el-form-item label="是否Vip商品" prop="is_restrictions">
				   	<el-radio v-model="ruleForm.isvip" label="0">否</el-radio>
  					<el-radio v-model="ruleForm.isvip" label="1">是</el-radio>
  					<el-input style="width: 150px;margin-left: 10px;" size="mini" v-show="ruleForm.isvip == 1" v-model="ruleForm.viprate" placeholder="Vip折扣比率"></el-input> 
				</el-form-item>					
				<el-form-item label="减库存方式">
				   	<el-radio v-model="ruleForm.minusStock" label="1">下单立减</el-radio>
  					<el-radio v-model="ruleForm.minusStock" label="2">付款后</el-radio>
  					<el-radio v-model="ruleForm.minusStock" label="3">不减</el-radio>
				</el-form-item>						
				<el-form-item label="销售时间" prop="is_restrictions">
				    <el-date-picker
				      v-model="sellTime"
				      type="daterange"
				      value-format="timestamp"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				    </el-date-picker>
				</el-form-item>					
				<el-form-item label="商品详情" prop="summary">
  					<quill-editor 
		      			v-model="ruleForm.introduction" 
		      			ref="myQuillEditor" 
		   			>
		    		</quill-editor>
				</el-form-item>				
<!-- 				<el-form-item label="商品详情" prop="summary">
					<video width="320" height="240" controls>
					  <source :src="okUrlV" type="video/mp4">
					  您的浏览器不支持 HTML5 video 标签。
					</video>
					<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(4)">
						<div class="desc el-icon-plus"></div>
						<input type="file" accept="image/*" @change="onFileChange($event,'V')" style="display:none;" id="upfile3">
					</div>	
				</el-form-item>	 -->								
			</div>
			<h3 class="title" style="margin: 20px 0">● 物流信息</h3>
			<div class="form-con">
				<el-form-item label="所在地" prop="city3">
				   	<p class="desc" v-show="!cityEdit">
						{{city1}}>>{{city2}}>>{{city3}}
						<span class="edit">&nbsp;&nbsp;&nbsp;编辑</span>
					</p>
					<div v-show="cityEdit">
					  <el-select v-model="city1" placeholder="请选择" @change="selectFirstEnd">
					    <el-option
					      v-for="item in cityList1"
					      :key="item.id_area"
					      :label="item.name"				      
					      :value="item.id_area">
					    </el-option>
					    </el-select>						  
					    <el-select v-model="city2" placeholder="请选择" @change="selectSecondEnd">
					    <el-option
					      v-for="item in cityList2"
					      :key="item.id_area"
					      :label="item.name"
					      :value="item.id_area">
					    </el-option>
					    </el-select>						 
					     <el-select v-model="city3" placeholder="请选择" @change="selecCitytEnd">
					    <el-option
					      v-for="item in cityList3"
					      :key="item.id_area"
					      :label="item.name"
					      :value="item.id_area">
					    </el-option>
					    </el-select>
					</div>
				</el-form-item>	
			</div>			
			<h3 class="title" style="margin: 20px 0">● 售后信息</h3>
			<div class="form-con">
				<el-form-item label="发票" prop="is_invoice">
					<el-radio v-model="ruleForm.is_invoice" label="1">有</el-radio>
  					<el-radio v-model="ruleForm.is_invoice" label="0">无</el-radio>
				</el-form-item>					
				<el-form-item label="保修" prop="is_guarantee">
					<el-radio v-model="ruleForm.is_guarantee" label="1">有</el-radio>
  					<el-radio v-model="ruleForm.is_guarantee" label="0">无</el-radio>
				</el-form-item>						
			</div>
			<h3 class="title" style="margin: 20px 0">● 上架设置</h3>
			<div class="form-con">
				<el-form-item label="所在地" prop="on_sale">
					<el-radio v-model="ruleForm.on_sale" label="0">
						暂不上架，
					</el-radio>
					放入<span style="color: #576b95;">我的商品</span>中	
					<el-radio v-model="ruleForm.on_sale" label="1">
						立即上架 &nbsp; 								
					</el-radio>
					<span style="color: red">(上架后商品类目，商品属性及商品名称将不能再修改，请确认已填写无误)</span> 
				</el-form-item>	
			</div>	
			<div class="confirm-btn" @click="submitForm('ruleForm')">确定</div>
			</el-form>
		</div>
	</div>
</template>
<script>
	import {getCookie} from '../../../../assets/js/cookie.js'
	export default{
		name : 'Commodity',
		data (){
			return{
				radioSel      : '',
				loading       : true,
				sellTime      : '',     //销售时间
				toggle  	  : true,
				keyword1   	  : '',		//一级目录的key
				keyword2   	  : '',		//二级目录的key
				keyword3   	  : '',		//三级目录的key
				groupList1 	  : [],		//一级目录列表
				groupList2 	  : [],		//二级目录列表
				groupList3 	  : [],		//三级目录列表
				searchResult1 : [],		//一级目录的搜索结果
				searchResult2 : [],		//二级目录的搜索结果
				searchResult3 : [],		//三级目录的搜索结果
				cityList1     : [],
				cityList2     : [],
				cityList3     : [],
				city1         : '',
				city2         : '',
				city3         : '',
				current1         : '',
				current2         : '',
				current3         : '',
				selectGoods1	 : '',
				selectGoods2	 : '',
				selectGoods3	 : '',
				ruleForm         : {
					minusStock     : '',		//减库存方式
					on_sale   	   : '',		//是否立即上架
					is_invoice     : '',		//是否要发票
					is_guarantee   : '',		//是否保修
					is_summary     : '',		//详情描述规格
					summary        : '',		//详情描述规格
					goodsSpec      : '',		//商品规格
					title     	   : '',		//商品名称
					price          : '',		//微信价格
					original_price : '',		//原价
					stock   	   : '',		//库存
					barcode   	   : '',		//商品条码
					face_video_md5 : '',        //视频介绍MD5					
					fitting_path   : '',	    //试衣间衣服图片
					discount   	   : '',		//折扣
					introduction   : '',        //商品详情
					shipping_id    : '',        //运费模板id
					shippingMoney  : '',        //运费
					is_promotion   : '',        //是否促销
					promotion_str  : '',        //促销话语
					isvip          : '',        //是否vip商品
					has_takeaway   : '',        // 是否支持外卖
					viprate        : ''         //vip折扣比例

				},
				ruleForm1         : {
					sku_title : '',
					sku_price : '',
					sku_stock : '',
					sku_img   : ''
				},
				rules1			  : {
					sku_title : [
						{ required: true, message: '请输入商品名称', trigger: 'blur' }
					],
					sku_price : [
						{ required: true, message: '请输入商品价格', trigger: 'blur' }
					],					
					sku_stock : [
						{ required: true, message: '请输入商品库存', trigger: 'blur' }
					]
				},
				rules            : {
					title : [
						{ required: true, message: '请输入商品名称', trigger: 'blur' },
            			{ max: 30, message: '限30个字', trigger: 'blur' }
					],
					goodsSpec : [
						{required: true, message: '请选择商品规格', trigger: 'change'}
					],
					price : [
						{ required: true, message: '请输入价格', trigger: 'blur' }
					],						
					stock : [
						{ required: true, message: '请输入库存', trigger: 'blur' }
					],					
					is_summary : [
						{required: true, message: '请选择详情描述', trigger: 'change'}
					],									
					is_invoice : [
						{required: true, message: '是否要发票', trigger: 'change'}
					],					
					is_guarantee : [
						{required: true, message: '是否保修', trigger: 'change'}
					],					
					on_sale : [
						{required: true, message: '是否立即上架', trigger: 'change'}
					],

					
				},
				cityEdit      : true,
				imgU0         : '',
				imgU1         : '',
				imgU2         : '',
				imgUV         : '',
				okUrl0        : '',
				okUrl1        : '',
				okUrl2        : '',
				okUrlV        : '',  //上传成功的视频地址
				skuList       : [],
				imgList       : [],
				imgListMd5    : [],
				lenImg        : 0,
				frendList     : [],
				groupList     : [],
				showVisible   : false,
				newGroupName  : ''

			}
		},
		props:['data'],
		watch:{
			keyword1(){
				let newGroupList1 = []
				this.groupList1.forEach( item => {
					if(item.cat_name.indexOf(this.keyword1) > -1){
						newGroupList1.push(item)
					}
				})				
				this.searchResult1 =  newGroupList1
			},
			keyword2(){
				let searchResult = []
				this.groupList2.forEach( item => {
					if(item.cat_name.indexOf(this.keyword2) > -1){
						searchResult.push(item)
					}
				})
				this.searchResult2 = searchResult
			},
			keyword3(){
				let searchResult = []
				this.groupList3.forEach( item => {
					if(item.cat_name.indexOf(this.keyword3) > -1){
						searchResult.push(item)
					}
				})
				this.searchResult3 = searchResult
			}
		},
		mounted(){
			this.uid       = getCookie('UID')
			this.token     = getCookie('TOKEN')
			this.shop_id   = this.data.id
			this.getFirstMenu()
			this.getCityList()
			this.getFrendId()
			this.getGroupList()
			this.cityInfo = {
				id_area :110000,
				name    : '北京'
			}
			console.log(this.token)
		},
		computed:{
			frendID(){
				let arr = []
				this.frendList.forEach( item => {
					arr.push({
						label : item.title,
						value : item.id
					})
				})
				return arr
			}
		},
		methods:{
			getFrendId(){
				let info = {
					uid : this.uid,
					token : this.token,
					shop_id : this.shop_id
				}
				this.$axiosGet('/platform/vdo/shipping.json',info,true).then( res => {
					if(res.code === 200){
						this.frendList = res.data
						console.log(this.frendList)
					}
				})
			},
			//选择完成
			selectOk(){
				if(!this.selectGoods1 || !this.selectGoods2 || !this.selectGoods3){
					this.$alert('请选择具体的商品分类')
					return
				}
				this.toggle = false
			},
			autoClick(index){
				if(index === 0){
					document.getElementById("upfile0").click();
				}				
				if(index === 1){
					document.getElementById("upfile1").click();
				}				
				if(index === 2){
					document.getElementById("upfile").click();
				}				
				if(index === 3){
					document.getElementById("upfile2").click();
				}				
				if(index === 4){
					document.getElementById("upfile3").click();
				}
			},
			onFileChange($event,index){
				let self = this;			
				this.lenImg0 = $event.target.files.length;
				if(this.lenImg0 === 0) {
					return;
				}	
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                                       
		            reader.onload = function (e) {
		            console.log('jinalile')		
		            	self['imgU'+index] = e.target.result;
		            		let url = '/utils/files/uploadbase64.json' + window.params
		            		if(index == 'V'){
		            			url = '/utils/files/upload.json' + window.params
		            		}
				        	self.$axiosPost( url,{
				    			upload : self['imgU'+index]
					        },true).then(res=>{
					        	if(res.code === 200){
					        		self['okUrl'+index] = res.data.md5
					        	}
					        })
			        }
		            reader.readAsDataURL(file);
			},
			onFileChangeList($event){
				let _this = this
				this.lenImg += $event.target.files.length
				console.log(this.lenImg)
				if(this.lenImg === 0){
					return
				}
				if(this.lenImg > 10){
					this.$message({message:'最多上传10张',type:'warning'})
					return
				}
				let fileArr = $event.target.files;
				 for(let i = 0;i < fileArr.length;i++){
				 	let file = fileArr[i]
				 	let reader = new FileReader()
				 	reader.onload = function(e){
				 		let url = '/utils/files/uploadbase64.json' + window.params
				 		_this.$axiosPost( url,{
				 			upload: e.target.result
				 		},true).then( res => {
				 			if(res.code === 200){
				 				_this.imgList.push(res.data.fullpath)
				 				_this.imgListMd5.push(res.data.md5)
				 			}
				 		})
				 	}
				 	 reader.readAsDataURL(file);
				 }

			},
			//获取分组列表
			getGroupList(){
				let info = {
					uid     : this.uid,
					token   : this.token,
					shop_id : this.shop_id
				}
				this.$axiosGet('/platform/vdo/getcate.json',info,true).then(res => {
					if(res.code === 200){
						this.groupList = res.data
					}
					if(res.code === 404){
						this.$message({message:'分组获取失败',type:'error'})
					}
				})
			},
			//新建分组
			createGroup(){
				let url = `/platform/vdo/createcate.json?uid=${this.uid}&token=${this.token}`
				this.$axiosPost(url,{
					shop_id:this.shop_id,
					cat_name:this.newGroupName
				},true).then( res => {
					this.showVisible = false
					if(res.code === 200){
						this.getGroupList()
						this.$message({message:'分组新建成功',type:'success'})
					}
					if(res.code === 404){
						this.$message({message:'分组新建失败',type:'error'})
					}
				})
			},
			getUserInfo(){
				let userinfo = {
					uid 	: this.uid,
					token   : this.token,
					cate_id : 'f5'
				}
				return userinfo
			},
			//对多规格列表的删除
			delSkuList(index){
				this.skuList.splice(index,1)
			},
			//对多规格进行保存
			saveSku(formName){
				this.$refs[formName].validate( (valid) => {
					if(valid){
						this.skuList.push({
							sku_title :this.ruleForm1.sku_title,
							sku_stock :this.ruleForm1.sku_stock,
							sku_price :this.ruleForm1.sku_price,
							sku_img   :this.okUrl0
						})
						this.$message({message:'添加成功',type:'success'})
					}else{
						return
					}
				})				
			},
			//提交表单
			submitVal(){
				let code = 100
				if(code === 100){
					this.$message({
						message : '恭喜您，开通成功',
						type    : 'success'
					})
					this.toggle = true
				}				
			},
			//获取1级菜单
			getFirstMenu(){
				let userinfo = this.getUserInfo()
				this.sendMenuRes(userinfo,1)
			},
			//获取2级菜单
			getSecondMenu(item,index){
				this.current1     = index
				this.selectGoods1 = item.cat_name
				let userinfo = this.getUserInfo()
				userinfo.cate_id = item.id
				this.sendMenuRes(userinfo,2)
			},
			//获取3级菜单			
			getTherdMenu(item,index){
				this.current2 	  = index
				this.selectGoods2 = item.cat_name
				let userinfo = this.getUserInfo()
				userinfo.cate_id  = item.id
				this.sendMenuRes(userinfo,3)
			},
			//菜单选择完毕
			selectEnd(item,index){
				this.selectGoods3 = item.cat_name
				this.cateId      = item.id
				console.log(this.cateId)
				this.current3     = index
			},
			//获取菜单的请求
			sendMenuRes(userinfo,type){
				this.$axiosGet('/platform/vdo/category.json',userinfo,true).then( res => {
					if(res.code === 200){
						this.loading = false
						if(type === 1){
							this.groupList1 = res.data
						}	
						if(type === 2){
							this.groupList2 = res.data
						}	
						if(type === 3){
							this.groupList3 = res.data
						}						
					}
				})
			},
			getCityList(){
				let userinfo = this.getUserInfo()
				delete userinfo.cate_id
				userinfo.id = 0
				this.getCityRes(userinfo,1)
			},
			selectFirstEnd(){
				this.cityInfo = ''
				let userinfo = this.getUserInfo()
				delete userinfo.cate_id
				userinfo.id   = this.city1
				this.getCityRes(userinfo,2)
				this.cityList1.forEach( item => {
					if(item.id_area === 110000 || item.id_area === 120000 || item.id_area === 310000|| item.id_area === 500000){
						if(item.id_area === this.city1){
							this.cityInfo = item
						}	
					}
				})
				console.log(this.cityInfo)
			},
			selectSecondEnd(){
				let userinfo = this.getUserInfo()
				delete userinfo.cate_id
				userinfo.id   = this.city2
				this.getCityRes(userinfo,3)
				let id  = this.cityInfo.id_area
				if(id === 110000 || id === 120000 || id === 310000|| id === 500000){
					return
				}
				this.cityList2.forEach( item => {
					if(item.id_area !== 110000 || item.id_area !== 120000 || item.id_area !== 310000|| item.id_area !== 500000){
						if(item.id_area === this.city2){
							this.cityInfo = item
						}	
					}
				})
			},
			selecCitytEnd(){

			},
			getCityRes(userinfo,type){
				this.$axiosGet('/platform/vdo/getcity/0.json',userinfo,true).then( res => {
					if(res.code === 200){
						if(type === 1){
							this.cityList1 = res.data
						}
						if(type === 2){
							this.cityList2 = res.data
						}	
						if(type === 3){
							this.cityList3 = res.data
						}
					}
				})
			},
			submitForm(formName){
				let formInfo = this.ruleForm
				formInfo.sku = this.skuList
				formInfo.cate_id   = this.cateId	
				formInfo.face_path = this.okUrl1
				formInfo.other_path = this.imgListMd5
				formInfo.location  = this.cityInfo.name 
				formInfo.city_id   = this.cityInfo.id_area 
				formInfo.face_vertical_path = this.okUrl2, 
				formInfo.begin_sale = this.sellTime[0] 
				formInfo.end_sale   = this.sellTime[1]
				formInfo.goods_cate_id = this.radioSel
				console.log(formInfo)
				if(this.ruleForm.goodsSpec == '0'){
					delete formInfo.sku
				}
				if(this.ruleForm.goodsSpec == 1 && !this.skuList.length){
					this.$message({message:'请添加至少一条多规格',type:'warning'})
					return
				}								
				this.$refs[formName].validate( (valid) => {
					if(valid){
						this.$axiosPost('/platform/vdo/product.json?uid='+this.uid+'&token='+this.token+'&shop_id='+this.shop_id,formInfo,true).then( res => {
								if(res.code === 200){
									this.$message({message:'商品添加成功',type:'success'})
								}
								if(res.code === 404){
									this.$message.error('商品添加失败')
								}
						})
					}else{
						return false
					}
				})
			},
			dialogVisible(){
				return false
			}


		}
	}
</script>
<style lang="less" scoped>
	.commodity /deep/ .el-radio__label{
		display: inline-block;
		line-height: 35px;
	}
	.commodity /deep/ .el-upload--picture-card{
		height: 120px;
		width: 120px;
		line-height: 120px;
	}
	.commodity .avatar-uploader /deep/ .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    	border-color: #409EFF;
  }
  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 120px;
	    height: 120px;
	    line-height: 120px;
	    text-align: center;
  }
  .avatar {
	    width: 120px;
	    height: 120px;
	    display: block;
  }
	.commodity{
		width: 90%;
		margin:0 auto;
		text-align: left;
		.crumb{
			margin-top: 20px;
			padding: 10px 0;
		}
		.select-warrp{
			margin-top: 20px;
			overflow: hidden;
			.select-item{
				float: left;
				.select-box{
					overflow-y: scroll;
					width: 250px;
					height: 410px;
					list-style: none;
					border: 1px solid #e7e7eb;
					.select-item{
						width: 100%;
						padding-left: 15px;
						line-height: 30px;
						cursor: pointer;
					}
					.active{
						background: #ededed;
					} 
				}
			}
		}
		.select-btn{
			margin: 20px auto;
			height: 30px;
			width: 100px;
			line-height: 30px;
			text-align: center;
			background: #3ca0ec;
			color: #fff;
			cursor: pointer;
			border-radius: 3px;
		}
		.guige-warrp{
			padding: 10px 0 20px 0;
			width: 600px;
			background: #f4f5f9;
			.title{
				margin-left: 20px;
				margin-bottom: 20px;
				border-bottom:1px solid #ccc;
			}
		}
		.form-con{
			.upload_imgs{
						position: relative;
						width: 140px;	
						height: 140px;								
						border: 1px dashed #ccc;
						border-radius: .15rem;
						display: flex;
						flex-flow: wrap;				
						align-items: center;
						cursor: pointer;		
						.desc{
							width: 100%;
							font-size: 30px;
							color: #ccc;
							text-align: center;
						}
						.uploading{
							z-index: 150;
							position: absolute;
							right: 40%;
							top: -.2rem;
						}		
						#showImg {					
							width: 100%;
							height: 100%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
						}
						.arr-img{
							width: 100%;
							height: 100%;
						}
					}
					.arr-up{
						float: left;
						height: 100px;
						max-width: 100px;
						margin-right: 10px;
						margin-bottom: 10px;
					}
		}

	
		.confirm-btn{
			margin: 20px auto;
			height: 30px;
			line-height: 30px;
			width: 100px;
			text-align: center;
			background: #44b549;
			color: #fff;
			cursor: pointer;
			border-radius: 3px;
		}
}
</style>